<template>
  <div class="box">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12"
              :lg="12" :xl="12">
        <div class="info-card">
          <el-row>
            <el-col class="info-card-header">
              CPU信息
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col class="info-card-content">
              <el-table
                :data="cpuTable"
                border
                style="width: 100%"
                :header-cell-style="headerCellStyle"
              >
                <el-table-column
                  prop="name"
                  label="属性"
                  width="220"
                />
                <el-table-column
                  prop="value"
                  label="值"
                />
              </el-table></el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12"
              :lg="12" :xl="12">
        <div class="info-card">
          <el-row>
            <el-col class="info-card-header">
              内存信息
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col class="info-card-content">
              <el-table
                :data="memTable"
                border
                style="width: 100%"
                :header-cell-style="headerCellStyle"
              >
                <el-table-column
                  prop="name"
                  label="属性"
                  width="220"
                />
                <el-table-column
                  prop="memValue"
                  label="内存"
                />
                <el-table-column
                  prop="jvmValue"
                  label="JVM"
                />
              </el-table></el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="info-card">
          <el-row>
            <el-col class="info-card-header">
              JAVA虚拟机信息
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col class="info-card-content">
              <el-table
                :data="jvmTable"
                border
                style="width: 100%"
                :header-cell-style="headerCellStyle"
                :show-header="false"
                :cell-style="twoColStyle"
              >
                <el-table-column
                  prop="name0"
                  label="属性0"
                  width="220"
                />
                <el-table-column
                  prop="value0"
                  label="值0"
                />
                <el-table-column
                  prop="name1"
                  label="属性1"
                  width="220"
                />
                <el-table-column
                  prop="value1"
                  label="值1"
                />
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="info-card">
          <el-row>
            <el-col class="info-card-header">
              服务器信息
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col class="info-card-content">
              <el-table
                :data="sysTable"
                border
                style="width: 100%"
                :header-cell-style="headerCellStyle"
                :show-header="false"
                :cell-style="twoColStyle"
              >
                <el-table-column
                  prop="name0"
                  label="属性"
                  width="220"
                />
                <el-table-column
                  prop="value0"
                  label="值"
                />
                <el-table-column
                  prop="name1"
                  label="属性2"
                  width="220"
                />
                <el-table-column
                  prop="value1"
                  label="值"
                />
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="info-card">
          <el-row>
            <el-col class="info-card-header">
              磁盘信息
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col class="info-card-content">
              <el-table
                :data="fileTable"
                border
                style="width: 100%"
                :header-cell-style="headerCellStyle"
              >
                <el-table-column
                  prop="dirName"
                  label="盘符路径"
                  width="220"
                />
                <el-table-column
                  prop="sysTypeName"
                  label="盘符类型"
                />
                <el-table-column
                  prop="typeName"
                  label="文件类型"
                  width="220"
                />
                <el-table-column
                  prop="total"
                  label="总大小"
                />
                <el-table-column
                  prop="free"
                  label="剩余大小"
                />
                <el-table-column
                  prop="used"
                  label="已经使用量"
                />
                <el-table-column
                  prop="usage"
                  label="资源的使用率"
                />
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSystemInfo } from '@/framework/api/monitor'

export default {
  name: 'MonitorServer',
  data() {
    return {
      cpuTable: [],
      jvmTable: [],
      memTable: [],
      sysTable: [],
      fileTable: [],
      headerCellStyle: {
        backgroundColor: '#f2f2f2'
      },
      cpuColNames: {
        cpuNum: {
          title: '核心数',
          unit: ''
        },
        used: {
          title: '用户使用率',
          unit: '%'
        },
        sys: {
          title: '系统使用率',
          unit: '%'
        },
        free: {
          title: '当前空闲率',
          unit: '%'
        }
      },
      jvmColName: {
        name: {
          title: 'Jvm名称',
          unit: ''
        },
        startTime: {
          title: '启动时间',
          unit: ''
        },
        home: {
          title: '安装路径',
          unit: ''
        },
        userDir: {
          title: '项目路径',
          unit: ''
        },
        runTime: {
          title: '运行时长',
          unit: ''
        },
        version: {
          title: 'Java版本',
          unit: ''
        }
      },
      memColName: {
        total: {
          title: '总内存',
          memUnit: 'GB',
          jvmUnit: 'MB'
        },
        used: {
          title: '已用内存',
          memUnit: 'GB',
          jvmUnit: 'MB'
        },
        free: {
          title: '剩余内存',
          memUnit: 'GB',
          jvmUnit: 'MB'
        },
        usage: {
          title: '使用率',
          memUnit: '%',
          jvmUnit: '%'
        }
      },
      sysColName: {
        computerName: '服务器名称',
        computerIp: '服务器IP',
        osName: '操作系统',
        osArch: '系统架构'
      },
      fileColName: {
        dirName: '盘符路径',
        sysTypeName: '盘符类型',
        typeName: '文件类型',
        total: '总大小',
        free: '剩余大小',
        used: '已使用量',
        usage: '资源使用率'
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      getSystemInfo().then((resp) => {
        if (resp.success) {
          const systemInfo = { ...resp.data }
          const { cpu, jvm, mem, sys, sysFiles } = systemInfo
          for (const item in this.cpuColNames) {
            const obj = {
              name: this.cpuColNames[item].title,
              value: `${cpu[item]}${this.cpuColNames[item].unit}`
            }
            this.cpuTable.push(obj)
          }
          const tableData = []
          for (const item in this.jvmColName) {
            if (item === 'userDir') {
              for (const i in sys) {
                if (i === item) {
                  const obj = {
                    name: this.jvmColName[item].title,
                    value: `${sys[item]}${this.jvmColName[item].unit}`
                  }
                  tableData.push(obj)
                  break
                }
              }
            } else {
              const obj = {
                name: this.jvmColName[item].title,
                value: `${jvm[item]}${this.jvmColName[item].unit}`
              }
              tableData.push(obj)
            }
          }
          for (let index = 0; index < tableData.length; index += 2) {
            let row = {}
            if (index + 1 < tableData.length) {
              row = {
                name0: tableData[index].name,
                value0: tableData[index].value,
                name1: tableData[index + 1].name,
                value1: tableData[index + 1].value
              }
            } else {
              row = {
                name0: tableData[index].name,
                value0: tableData[index].value
              }
            }
            this.jvmTable.push(row)
          }
          for (const item in this.memColName) {
            const obj = {
              name: this.memColName[item].title,
              memValue: `${mem[item]}${this.memColName[item].memUnit}`,
              jvmValue: `${jvm[item]}${this.memColName[item].jvmUnit}`
            }
            this.memTable.push(obj)
          }
          const keys = Object.keys(this.sysColName)
          for (let index = 0; index < keys.length; index += 2) {
            const row = {
              name0: this.sysColName[keys[index]],
              value0: sys[keys[index]],
              name1: this.sysColName[keys[index + 1]],
              value1: sys[keys[index + 1]]
            }
            this.sysTable.push(row)
          }
          this.fileTable = sysFiles
        }
      })
    },
    twoColStyle(option) {
      const { columnIndex } = option
      if (columnIndex === 0 || columnIndex === 2) {
        return 'background-color: #f2f2f2'
      }
    }
  }
}

</script>

<style lang="scss" scoped>
  .box{
    margin: 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .el-divider--horizontal{
    margin: 4px 0;
  }
  .info-card{
    background-color: #fff;
    box-shadow: #fff5f7de 0px 0px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
  }
  .info-card-header{
    padding: 10px;
  }
  .info-card-content{
    padding: 15px;
  }
  .header-col-class{
    background-color: aqua;
  }

</style>
